<script setup lang="ts">
import { useStatistic } from '@/composables/useStatistic'

const {
  getComputedResource,
  regionsID,
  resourceLoading,
  loading,
  allRegionOptions,
  resourceStatistics,
  resourceIpData,
  resourceBandWidthData,
} = useStatistic()

function handleChange(value: string) {
  regionsID.value = value
}

onMounted(getComputedResource)
</script>

<template>
  <main-container
    :loading="resourceLoading || loading"
    :show-pagination="false"
    class="px-0"
  >
    <template #title>
      <div class="flex flex-1 items-center gap-x-4">
        <h1 class="m-0 p-0 text-xl font-700">
          云计算资源
        </h1>
        <a-select
          v-model="regionsID"
          :options="allRegionOptions"
          class="h-30px w-115px! px-2!"
          placeholder="请选择"
          @change="handleChange"
        >
          <template #label="{ data }">
            <span class="flex items-center gap-x-2">
              <i-icons-area />
              <span class="text-xs"> {{ data?.label }}</span>
            </span>
          </template>
        </a-select>
      </div>
    </template>
    <div class="flex flex-col space-y-6">
      <statistics-resource
        show-total
        :data="resourceStatistics"
      />
      <resource-card
        :key="regionsID"
        show-total
        :data="resourceIpData"
        type="IP"
      />
      <resource-card
        :key="regionsID"
        show-total
        :data="resourceBandWidthData"
        type="带宽"
      />
    </div>
  </main-container>
</template>

<style scoped lang="less">
:deep(.arco-select) {
  @apply rounded-full! bg-white border-color-1;
  .arco-select-view-value {
    @apply p-0;
  }
  .arco-select-view-suffix {
    @apply pl-2 h-30px;
  }
}
</style>
